<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<!--内部样式-->
		<style type="text/css">
			{		/* *：通配符，指所有的标签。初始化所有标签的内边距和外边距 */
				margin:0;
				padding:0;
			}
			/* 盒子模型四要素：内边距，外边距，边框， */
			.box{
				width: 300px;	/* 盒子的宽 */
				height:450px;	/* 高 */
				border:1px solid red;
				/* padding:50px 40px 30px 20px;	/* 写 “0”不用写单位 */	/* 分别对应：上 下 左 右 顺时针旋转 */
				 padding:50px 30px 10px;	/* 分别对应：上 左右 下 */
				/* padding:50px 20px;	/* 分别对应：上下 左右 */
				/* padding:50px;	四个方位都是50px */
				/* margin-top:100px;
				margin-bottom:50px;
				margin-left:100px; */
				margin:50px;
			}
			.box2{
				width:200px;
				height:200px;
				border:1px solid green;
			/* margin:auto; */		/* 盒子水平居中 */
			}
			.box3{
				width:68px;
				height:36px;
				border:1px solid blue;
				margin:55px;
			}
		</style>
	</head>
	<body>
		<!-- 盒子模型：内容content，内边距padding,边框border,外边距maring,类选择器calss -->
		<!-- 方位词：top上，bottom下，left左，right右，center居中 -->
		<!-- 内边距padding:会把盒子撑大 -->
		<!-- 外边距margin:盒子与盒子之间的距离 -->
		<!--外边距的应用：
			1.可以让块级盒子水平居中>第一盒子要有宽度
			-->
		<div calss="box">
			hello box！
		</div>
		<div calss="box2">
			hello box2
			</div>
		<!-- <span>hello span1 </span>
		<span>hello span2</span> -->
	</body>
</html>
